<style>
/* style for scroll bar */
.box1, .box1 .antiscroll-inner {
	width: 446px;
	height: 184px;
}
.box1 .box-inner {
	padding-right: 32px;
}
.box2, .box2 .antiscroll-inner {
	width: 100%;
	height: 190px;
}
.antiscroll-wrap {
	overflow: hidden;
	position: relative;
	display: block !important;
}
</style>
<div id="after-signed-in" class="course-structure">
    <h2>Course Content</h2>
    <div id="course-structure-header">
        <span id="course-structure-legend"><img src="/assets/img/legend.png"/></span>
        <span id="course-structure-units">Units</span>
        <span id="course-structure-time">Time</span>
    </div>

    {% set section_number = '0' %}
    {% for unit in units %}
        {% if section_number != unit.section_id and not loop.first and section_number != "" %}
        <!-- move on to another section, close the previous section -->
            </div></div></div>
        {% endif %}

        {% if unit.now_available or is_course_admin %}
        	{% if unit.type == 'A' and unit.section_id != "" %}<!-- Homework -->
            	{% set section_number = unit.section_id %}
                <span class="accordion-sub this-is-a-homework">
                    <a href="" class="homework-title">{{ unit.title }}</a>
                    {% if not transient_student %}
	                    {% if unit.review_progress == 2 %}
                        	<a href="/assessment?name={{ unit.unit_id }}" class="homework-status">Completed(Check Available Review)</a>
                        	<a href="/reviewdashboard?unit={{ unit.unit_id }}" class="homework-review">Review Others' Homework[2+/2]</a>
                    	{% elif unit.review_progress == 1 %}
                        	<a href="/assessment?name={{ unit.unit_id }}" class="homework-status">Completed(View Submission)</a>
                        	<a href="/reviewdashboard?unit={{ unit.unit_id }}" class="homework-review">Review Others' Homework[1/2]</a>
                        {% elif unit.review_progress == 0 and progress[unit.unit_id] > 0 %}
                        	<a href="/assessment?name={{ unit.unit_id }}" class="homework-status">Completed(View Submission)</a>
                        	<a href="/reviewdashboard?unit={{ unit.unit_id }}" class="homework-review">Review Others' Homework[0/2]</a>
                        {% elif unit.review_progress == 0 and progress[unit.unit_id] == 0 %}
							<a href="/assessment?name={{ unit.unit_id }}" class="homework-status">Not Started Yet</a>
                        {% endif %}
                    {% endif %}
                </span>
        
        	{% elif unit.type == 'A' and unit.section_id == "" %}<!-- Midterm, Final and Survey -->
            	{% set section_number = unit.section_id %}

                <div class="no-accordion">
                    <div class="accordion-section">
    	                <div class="accordion-section-title"><a href="/assessment?name={{ unit.unit_id }}">{{ unit.section_title }}</a></div>
                        <div class="accordion-progress">
                        	{% if not transient_student %}
                            	{% if unit.unit_id == 'Survey' %}
                                	{% if progress[unit.unit_id] > 0 %}
                                        Completed
                                    {% else %}
                                        Not Completed Yet
                                    {% endif %}
                                {% else %}
                                    {% if unit.review_progress == 2 %}
                                    	<a href="/reviewdashboard?unit={{ unit.unit_id }}">Completed</a>
                                    {% elif unit.review_progress == 1 %}
                                        <a href="/reviewdashboard?unit={{ unit.unit_id }}">Submitted(at least two peer reviews are required)</a>
                                    {% elif unit.review_progress == 0 and progress[unit.unit_id] > 0 %}
                                    	<a href="/reviewdashboard?unit={{ unit.unit_id }}">Submitted(at least two peer reviews are required)</a>
                                    {% elif unit.review_progress == 0 and progress[unit.unit_id] == 0 %}
                                        Not Completed Yet
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        </div>
	                </div>
        	        <div class="section-units">
	                </div>
                </div>

            {% elif unit.type == 'U' %}
            
                {% if section_number != unit.section_id %}<!-- if it is the first unit of each section, start a section and create an accordion -->
                	{% set section_number = unit.section_id %}<!-- update section number -->

                    <div class="accordion">
                        <div class="accordion-section">
                            <div class="accordion-section-title">
                                {{- gettext('Section %(id)s - %(title)s', id=unit.section_id, title=unit.section_title) -}}
                            </div>

                            <div class="accordion-progress">
                            {% for u in units %}
                                {% if u.section_id == section_number and u.unit_id|int('not a number') != 'not a number' %}
                                    {% if not transient_student %}
                                        {% if progress[u.unit_id] == 2 %}<!-- completed -->
                                            <div class="status-image">
                                                <img class="progress-status-png" src="/assets/img/status/completed.png">
                                                <span class="progress-status-unit-id">{{ u.unit_id }}</span>
                                            </div>
                                        {% elif progress[u.unit_id] == 1 %}<!-- in progress-->
                                            <div class="status-image">
                                                <img class="progress-status-png" src="/assets/img/status/in_progress.png">
                                                <span class="progress-status-unit-id">{{ u.unit_id }}</span>
                                            </div>
                                        {% else %}<!-- not yet started -->
                                            <div class="status-image">
                                                <img class="progress-status-png" src="/assets/img/status/not_started_yet.png">
                                                <span class="progress-status-unit-id">{{ u.unit_id }}</span>
                                            </div>
                                        {% endif %}
                                    {% else %}
                                        {{ u.unit_id }}
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                            </div>
                            <div class="accordion-total-time">{{ unit.section_time }}</div>
                        </div>
                        
                        <!-- first unit in the section -->
                        <div class="section-units">
                            <div class="accordion-content">
                                <div class="unit-pic-and-overview">
	                                    <div class="unit-pic-and-overview-left">
                                        {%- if unit.section_img -%}
	                                        <img src="/assets/img/slider/{{ unit.section_img }}" />
                                        {% endif %}
                                        </div>
										
                                        <div class="antiscroll-wrap">
                                        <div class="box1">
                                        <div class="antiscroll-inner">
                                        <div class="box-inner">
                                            <div class="unit-pic-and-overview-right">{{ unit.section_overview | safe }}</div>
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        <p class="helper">click on unit title to check out the unit. click + to left of each unit to get more detail about that unit.</p>

                                </div>
                                <span class="accordion-sub">
                                	<div class="accordion-link-to-lesson">
                                        <a href="/unit?unit={{ unit.unit_id }}">
                                        	<div class="unit-title">{{ gettext('Unit %(id)s - %(title)s', id=unit.unit_id, title=unit.title) }}</div>
                                        	<div class="unit-total-time">{{ unit.total_time }}</div>
                                        </a>
                                    </div>
                                </span>
                                <div class="accordion-sub-dropdown">
	                                <div class="display-inline-block">
                                        <div class="unit-lessons">
                                            <ul class="lesson-list">
                                                    <li class="each-lesson-title selected" onclick="show_description(this, 0)">
                                                    	Unit Overview
                                                    </li>
                                            {% for key, lesson in all_lessons.iteritems() if key == unit.unit_id %}
                                                {% for value in lesson %}
                                                    <li class="each-lesson-title" onclick="show_description(this, {{ value.lesson_id }})">
                                                    	{{- gettext('Lesson %(id)s - %(title)s', id=value.lesson_id, title=value.title) -}}
                                                    </li>
                                                {% endfor %}
                                            {% endfor %}
                                            </ul>
                                        </div>
                                        <div class="unit-lessons-description">
                                            <ul class="lesson-description-list">
													<li class="each-lesson-description">
														<div class="antiscroll-wrap">
                                                        <div class="box2">
                                                        <div class="antiscroll-inner">
                                                        <div class="box-inner">
                                                        	<div class="each-lesson-h">Overview</div>
                                                        	<div class="each-lesson-text">{{ unit.overview | safe }}</div>
                                                        </div>
                                                        </div>
                                                        </div>
                                                        </div>
    	                                            </li>
                                            {% for key, lesson in all_lessons.iteritems() if key == unit.unit_id %}
                                                {% for value in lesson %}
                                                	<li class="each-lesson-description">
                                                        <div class="antiscroll-wrap">
                                                        <div class="box2">
                                                        <div class="antiscroll-inner">
                                                        <div class="box-inner">
                                                    
                                                        <div class="each-lesson-h">
                                                        <a href="/unit?unit={{ unit.unit_id }}&lesson={{ value.lesson_id }}">
                                                            {{- gettext('%(id)s.%(lesson_id)s - %(title)s', id=unit.unit_id, lesson_id=value.lesson_id, title=value.title) -}}
                                                        </a>
                                                        </div>
                                                        <div class="each-lesson-text">
                                                            {{- value.objectives | safe -}}
                                                        </div>
                                                        
                                                        </div>
                                                        </div>
                                                        </div>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                {% else %}
                                <!-- second and more units in the section -->
                                <span class="accordion-sub">
                                	<div class="accordion-link-to-lesson">
                                        <a href="/unit?unit={{ unit.unit_id }}">
                                            <div class="unit-title">{{ gettext('Unit %(id)s - %(title)s', id=unit.unit_id, title=unit.title) }}</div>
                                            <div class="unit-total-time">{{ unit.total_time }}</div>
                                        </a>
                                    </div>
                                </span>
                                <div class="accordion-sub-dropdown">
                                	<div class="display-inline-block">
                                        <div class="unit-lessons">
                                            <ul class="lesson-list">
                                                    <li class="each-lesson-title selected" onclick="show_description(this, 0)">
                                                    	Unit Overview
                                                    </li>
                                            {% for key, lesson in all_lessons.iteritems() if key == unit.unit_id %}
                                                {% for value in lesson %}
                                                    <li class="each-lesson-title" onclick="show_description(this, {{ value.lesson_id }})">
                                                    	{{- gettext('Lesson %(id)s - %(title)s', id=value.lesson_id, title=value.title) -}}
                                                    </li>
                                                {% endfor %}
                                            {% endfor %}
                                            </ul>
                                        </div>
                                        <div class="unit-lessons-description">
                                            <ul class="lesson-description-list">
                                            
													<li class="each-lesson-description">
														<div class="antiscroll-wrap">
                                                        <div class="box2">
                                                        <div class="antiscroll-inner">
                                                        <div class="box-inner">
                                                        	<div class="each-lesson-h">
                                                            	Overview
                                                            </div>
                                                        	<div class="each-lesson-text">
	                                                        	{{- unit.overview | safe -}}
                                                            </div>
                                                        </div>
                                                        </div>
                                                        </div>
                                                        </div>
    	                                            </li>
                                            {% for key, lesson in all_lessons.iteritems() if key == unit.unit_id %}
                                                {% for value in lesson %}
                                                    <li class="each-lesson-description">
                                                        <div class="antiscroll-wrap">
                                                        <div class="box2">
                                                        <div class="antiscroll-inner">
                                                        <div class="box-inner">
                                                            <div class="each-lesson-h">
                                                            	<a href="/unit?unit={{ unit.unit_id }}&lesson={{ value.lesson_id }}">
                                                                {{- gettext('%(id)s.%(lesson_id)s - %(title)s', id=unit.unit_id, lesson_id=value.lesson_id, title=value.title) -}}
                                                                </a>
                                                            </div>
                                                            <div class="each-lesson-text">
                                                                {{- value.objectives | safe -}}
                                                            </div>
                                                        </div>
                                                        </div>
                                                        </div>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                {% endif %}
                
                
                {% if loop.last %}
                <!-- close it at the end of the loop -->
                            </div><!--accordion-content-->
                        </div><!--section-units-->
                    </div><!--accordion-->
                {% endif %}


            {% elif unit.type == 'O' %}
                <!-- Other type -->
                <div class="accordion">
                    <div class="accordion-section">
                        <div class="accordion-section-title"><a href="{{ unit.href }}" target="_blank">{{ unit.title }}</a></div>
                        <div class="accordion-progress"></div>
                        <div class="accordion-total-time"></div>
                    </div>
                </div>

            {% else %}
                <!-- Error: unit type not recognized. -->
                <div class="accordion">
                    <div class="accordion-section">
                        <div class="accordion-section-title">Error: unit type not recognized.</div>
                        <div class="accordion-progress"></div>
                        <div class="accordion-total-time"></div>
                    </div>
                </div>

            {% endif %}

            {% if not unit.now_available and is_course_admin %}
                (Private)
            {% endif %}

        {% else %}
        
        {% endif %}
    {% endfor %}
</div>
<script>
$(function() {
	/* accordion http://api.jqueryui.com/accordion/ */
	$(".accordion").accordion({
		active: false,
		collapsible: true,
		icons: { "header": "ui-icon-plus ui-icon-large", "activeHeader": "ui-icon-minus ui-icon-large" },
		heightStyle: "content",
		disabled: false,
		clearStyle: true,
		header: 'div.accordion-section'
	});
	$( ".accordion-content" ).accordion({
		active: false,
		collapsible: true,
		icons: { "header": "ui-icon-plus ui-icon-large", "activeHeader": "ui-icon-minus ui-icon-large" },
		heightStyle: "content",
		disabled: false,
		clearStyle: true,
		header: 'span:not(.this-is-a-homework)'
	});
	
	/* disable accordion from opening when click on the link */
	$(".accordion-content a, .accordion a").click(function() {
		window.location = $(this).attr('href');
		return false;
	});	
});

/* set height for antiscroll */
$(".box2").each(function(index) {
	var h = $(this).parent().parent().parent().parent().height();
	$(this).height(h - 28);
	$(this).children(".antiscroll-inner").height(h - 28);
});
/* OS X Lion style cross-browser native scrolling: https://github.com/LearnBoost/antiscroll */
$(".antiscroll-wrap").antiscroll({autoHide: false});
$(".each-lesson-description").hide();
$(".each-lesson-description:first-of-type").show();
</script>